l105/PO Informatica P4/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>

.menubalk {
    background-color: #333; /* Donkergrijze achtergrond */
    overflow: hidden; /* Verbergt inhoud die buiten de container valt */
}

/* Stijl voor elk item in de menubalk */
.menubalk a {
    float: left; /* Zorgt ervoor dat de links naast elkaar staan */
    display: block;
    color: #f2f2f2; /* Lichte tekstkleur voor contrast */
    text-align: center;
    padding: 14px 20px; /* Padding rondom de tekst */
    text-decoration: none; /* Geen onderstreping */
}

/* Verandert de achtergrondkleur van links bij mouse hover */
.menubalk a:hover {
    background-color: #ddd; /* Lichte achtergrond */
    color: black; /* Donkere tekst */
}





</style>



</head>
<body>

    <div class="menubalk">
        <a href="#home">Producten</a>
        <a href="#team">Wie er werken</a>
        <a href="#baas">De baas</a>
        <a href="#klanten">Ingeschreven klanten</a>
        <a href="#contact">Contact</a>
        <a href="#bestellen">Bestellen</a>
    </div>


    <div class="content">
        <h1>Welkom op onze website!</h1>
        <p>Hier komt meer inhoud...</p>
    </div>
    
</body>
</html>

Resultaat

Made by Thijs Aarnoudse